<template>
    <Panel title="Tasks">
        <div
            class="mt-2 project "
            v-for="task in tasks" 
            :key="task.id"
        > 

        <EditableRecord
            :isEditMode="!task.isEditMode"
            :title="task.description"
            @onInput="setTaskDescription({
                task,
                description: $event,
            })"
            @onClick="taskClicked(task)"
            @onEdit="setEditMode(task)"
            @onSave="saveTask(task)"
            @onDelete="deleteTask (task)"
        >
        <v-icon
            @click="checkClicked(task)"
        >          
            {{ task.completed ? 'check_box':'check_box_outline_blank'}}
        </v-icon>
        </EditableRecord>
        </div>     
         <CreateRecord 
             placeholder="I need to ..."
            :value="newTaskName"
            @onInput="setNewTaskName"
            @create="createTask"
        >
        </CreateRecord>   
    </Panel>
</template>
<script>
import { mapMutations, mapState, mapActions } from 'vuex';
import CreateRecord from '@/components/CreateRecord.vue';
import EditableRecord from '@/components/EditableRecord.vue';

export default {
    components: {
        CreateRecord,
        EditableRecord,
    },
    computed: {
        ...mapState('tasks',[
            'tasks',
            'newTaskName',
            'EditableRecord',
        ]),
    },
    methods: {
        ...mapActions('tasks', [
            'createTask', 
            'deleteTask',
            'saveTask',    
            
        ]),
        ...mapMutations('tasks', [
            'setNewTaskName',  
            'setTaskDescription',   
            'setEditMode',
            'toggleCompleted',
        ]),
        checkClicked(task){
            this.toggleCompleted(task);
            this.saveTask(task);
        },
    }
}
</script>
<style>
.project{
    font-size: 18px;
}
</style>
